<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        table {
            border-collapse: collapse;
            width: 1000px;
            margin: 100px auto 0;
        }

        table td {
            border: 1px solid #930;
        }


        table tr td {
            width: 250px;
            height: 100px;
            text-align: center;
        }

        table tr.title td {
            height: 50px;
            background: #c36;
            color: #fff;
            font-weight: bold;
            font-size: 14px;
        }

        table tr td img {
            width: 100px;
        }

        table tr td.number span {
            display: inline-block;
            font-size: 14px;
            text-align: center;
        }

        table tr td.number span.down,
        table tr td.number span.add {
            width: 30px;
            height: 30px;
            background: #ddd;
            font-weight: bold;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
        }

        table tr td.number span.num {
            width: 50px;
            height: 30px;
            line-height: 30px;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            color: #c36;
        }

        .box {
            display: flex;
            justify-content: flex-end;
            width: 1000px;
            height: 50px;
            background: #c36;
            margin: 10px auto;
        }

        .box p {
            width: 250px;
            height: 50px;
            line-height: 50px;
            color: #fff;
            font-size: 14px;
        }

        .box p span {
            color: #f4e5a9;
            font-size: 16px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <table>
        <tr class="title">
            <td>商品</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
        </tr>
        <tr>
            <td>
                <img src="https://s1.ax1x.com/2020/09/29/0eqGCD.jpg" alt="">
            </td>
            <td class="danjia">8</td>
            <td class="number">
                <span class="down">-</span><span class="num">0</span><span class="add">+</span>
            </td>
            <td class="price">0</td>
        </tr>

        <tr>
            <td>
                <img src="https://s1.ax1x.com/2020/09/29/0eqJ8e.jpg" alt="">
            </td>
            <td class="danjia">10</td>
            <td class="number">
                <span class="down">-</span><span class="num">0</span><span class="add">+</span>
            </td>
            <td class="price">0</td>
        </tr>
        <tr>
            <td>
                <img src="https://s1.ax1x.com/2020/09/29/0eqYgH.jpg" alt="">
            </td>
            <td class="danjia">12.5</td>
            <td class="number">
                <span class="down">-</span><span class="num">0</span><span class="add">+</span>
            </td>
            <td class="price">0</td>
        </tr>
        <tr>
            <td>
                <img src="https://s1.ax1x.com/2020/09/29/0eqUKA.jpg" alt="">
            </td>
            <td class="danjia">23</td>
            <td class="number">
                <span class="down">-</span><span class="num">0</span><span class="add">+</span>
            </td>
            <td class="price">0</td>
        </tr>

    </table>

    <div class="box">
        <p>已选中商品 <span class="total-num">0</span> 个</p>
        <p>合计费用 <span class="total-price">0</span> ￥</p>
    </div>

    <script>
        (function () {

            let aAdd = document.querySelectorAll(".add");
            let aDown = document.querySelectorAll(".down");
            let aNum = document.querySelectorAll(".num");
            let aPrice = document.querySelectorAll(".price");
            let oTotalNum = document.querySelector(".total-num");
            let oTotalPrice = document.querySelector(".total-price");


            let len = aNum.length; 

    
            let data = [{
                    dj: 8,
                    number: 0
                },
                {
                    dj: 10,
                    number: 0
                },
                {
                    dj: 12.5,
                    number: 0
                },
                {
                    dj: 23,
                    number: 0
                },
            ]





            for (let i = 0; i < len; i++) {
                aAdd[i].onclick = function () {
                    data[i].number++;
                    updateView(i)

                };



                aDown[i].onclick = function () {
                    // 判断
                    if (!data[i].number) {
                        return;
                    }
                    data[i].number--;
                    updateView(i)



                };
            }


            // 获取总数和总价的函数
            function getTotal() {
                //总数
                let n = 0;

                //总价
                let p = 0;

                for (let i = 0; i < len; i++) {
                    //总数
                    n += data[i].number;

                    //总价
                    p += data[i].number * data[i].dj;
                }
                return {
                    totalNum: n,
                    totalPrice: p
                }

            }


            function updateView(index) {
                aNum[index].innerHTML = data[index].number; //个数
                aPrice[index].innerHTML = data[index].number * data[index].dj; //小计
                oTotalNum.innerHTML = getTotal().totalNum;
                oTotalPrice.innerHTML = getTotal().totalPrice;
            }




        })();





        //if(data[i].number > 0){


        //  }



       
    </script>
</body>

</html>
close